<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Dropdown from "./Dropdown.svelte";
    import { fn } from "storybook/test";
    import Icon from "@iconify/svelte";
    import DropdownMenu from "./DropdownMenu.svelte";
    import DropdownItem from "./DropdownItem.svelte";
    import { Button } from "../Button";
    import { Link, Text } from "../Typography";
    import Space from "../Space/Space.svelte";
    import { ButtonGroup } from "../ButtonGroup";
    import type { DropdownProps } from "./Dropdown";

    const { Story } = defineMeta({
        title: "Components/Navigation/Dropdown",
        component: Dropdown,
        subcomponents: {
            DropdownMenu,
            DropdownItem,
        },
        tags: ["autodocs"],
        argTypes: {
            trigger: {
                control: "select",
                options: ["hover", "click", "contextMenu", "custom"],
            },
            align: {
                control: "select",
                options: ["bottom", "bottomLeft", "bottomRight", "right", "rightBottom", "left", "leftBottom", "top", "topLeft", "topRight", "rightTop", "leftTop"],
            },
            theme: {
                control: "select",
                options: [
                    "dark",
                    "light",
                    "primary",
                    "success",
                    "warning",
                    "error",
                    "info",
                    "blue",
                    "green",
                    "red",
                    "yellow",
                    "pink",
                    "magenta",
                    "volcano",
                    "orange",
                    "gold",
                    "lime",
                    "cyan",
                    "geekblue",
                    "purple",
                ],
            },
            onselect: {
                description: "选择菜单项触发",
            },
            transfer: {
                description: "是否将菜单渲染到 body 内，在 Tabs, Stepper, Drawer, Modal 等组件内使用时建议开启此属性",
            },
            revers: {
                description: "是否自动根据容器的尺寸反转方向",
            },
            arrow: {
                description: "菜单项是否有箭头",
            },
            handler: {
                description: "自定义触发元素",
            },
        },
        args: {},
    });

    let x = $state(0);
    let y = $state(0);
</script>

<Story name="Default">
    {#snippet template(args)}
        <div style="height: 300px;">
            <Dropdown
                align="bottomLeft"
                onselect={(name: string) => {
                    console.log(name);
                }}
            >
                {#snippet menu()}
                    <DropdownMenu>
                        <DropdownItem name="edit" arrow>
                            {#snippet icon()}
                                <Icon icon="fluent-color:clipboard-text-edit-20" />
                            {/snippet}
                            Edit
                            <DropdownMenu>
                                <DropdownItem name="color">Color</DropdownItem>
                                <DropdownItem name="size">Size</DropdownItem>
                            </DropdownMenu>
                        </DropdownItem>
                        <DropdownItem>
                            {#snippet icon()}
                                <Icon icon="fluent-color:gift-card-16" />
                            {/snippet}Add to Cart
                        </DropdownItem>
                        <DropdownItem disabled>
                            {#snippet icon()}
                                <Icon icon="fluent-color:heart-16" />
                            {/snippet}
                            Save to Wishlist
                        </DropdownItem>
                        <DropdownItem divided arrow>
                            {#snippet icon()}
                                <Icon icon="fluent-color:share-android-16" />
                            {/snippet}Share
                            <DropdownMenu>
                                <DropdownItem>微信</DropdownItem>
                                <DropdownItem>微博</DropdownItem>
                                <DropdownItem>短视频</DropdownItem>
                            </DropdownMenu>
                        </DropdownItem>
                        <DropdownItem>
                            {#snippet icon()}
                                <Icon icon="fluent-color:code-block-16" />
                            {/snippet}Copy link
                        </DropdownItem>
                        <DropdownItem divided>
                            {#snippet icon()}
                                <Icon icon="fluent-color:image-16" />
                            {/snippet}View image
                        </DropdownItem>
                        <DropdownItem>
                            {#snippet icon()}
                                <Icon icon="fluent-color:settings-16" />
                            {/snippet}Settings
                        </DropdownItem>
                    </DropdownMenu>
                {/snippet}
                <Button>选择操作</Button>
            </Dropdown>
        </div>
    {/snippet}
</Story>

{#snippet dropmenu()}
    <DropdownMenu>
        <DropdownItem name="edit" arrow>
            {#snippet icon()}
                <Icon icon="fluent-color:clipboard-text-edit-20" />
            {/snippet}
            Edit
            <DropdownMenu>
                <DropdownItem name="color">Color</DropdownItem>
                <DropdownItem name="size">Size</DropdownItem>
            </DropdownMenu>
        </DropdownItem>
        <DropdownItem>
            {#snippet icon()}
                <Icon icon="fluent-color:gift-card-16" />
            {/snippet}Add to Cart
        </DropdownItem>
        <DropdownItem disabled>
            {#snippet icon()}
                <Icon icon="fluent-color:heart-16" />
            {/snippet}
            Save to Wishlist
        </DropdownItem>
        <DropdownItem divided arrow>
            {#snippet icon()}
                <Icon icon="fluent-color:share-android-16" />
            {/snippet}Share
            <DropdownMenu>
                <DropdownItem>微信</DropdownItem>
                <DropdownItem>微博</DropdownItem>
                <DropdownItem>短视频</DropdownItem>
            </DropdownMenu>
        </DropdownItem>
        <DropdownItem>
            {#snippet icon()}
                <Icon icon="fluent-color:code-block-16" />
            {/snippet}Copy link
        </DropdownItem>
        <DropdownItem divided>
            {#snippet icon()}
                <Icon icon="fluent-color:image-16" />
            {/snippet}View image
        </DropdownItem>
        <DropdownItem>
            {#snippet icon()}
                <Icon icon="fluent-color:settings-16" />
            {/snippet}Settings
        </DropdownItem>
    </DropdownMenu>
{/snippet}
<Story name="Trigger" args={{ visible: false }}>
    {#snippet template(args)}
        <div style="height: 300px;">
            <Space>
                <Dropdown
                    align="bottomLeft"
                    trigger="click"
                    onselect={(name: string) => {
                        console.log(name);
                    }}
                >
                    {#snippet menu()}
                        {@render dropmenu()}
                    {/snippet}
                    <Link>点击显示</Link>
                </Dropdown>

                <Dropdown
                    align="bottomLeft"
                    trigger="contextMenu"
                    onselect={(name: string) => {
                        console.log(name);
                    }}
                >
                    {#snippet menu()}
                        {@render dropmenu()}
                    {/snippet}
                    <Link>右键菜单</Link>
                </Dropdown>

                <Dropdown
                    align="bottomLeft"
                    trigger="custom"
                    bind:visible={args.visible}
                    onselect={(name: string) => {
                        console.log(name);
                    }}
                >
                    {#snippet menu()}
                        <div style="width: 150px; padding: 20px; background: #fff">
                            <div>dropdown内容</div>
                            <Button
                                type="primary"
                                onclick={() => {
                                    args.visible = false;
                                }}>关闭</Button
                            >
                        </div>
                    {/snippet}
                    <Link>自定义</Link>
                </Dropdown>
            </Space>
        </div>
    {/snippet}
</Story>
<Story name="Transfer">
    {#snippet template(args)}
        <div style="height: 300px;">
            <Dropdown
                transfer
                trigger="click"
                align="bottomLeft"
                onselect={(name: string) => {
                    console.log(name);
                }}
            >
                {#snippet menu()}
                    <DropdownMenu>
                        <DropdownItem>驴打滚</DropdownItem>
                        <DropdownItem>炸酱面</DropdownItem>
                        <DropdownItem disabled>豆汁儿</DropdownItem>
                        <DropdownItem divided arrow
                            >北京烤鸭
                            <DropdownMenu>
                                <DropdownItem name="挂炉烤鸭">挂炉烤鸭</DropdownItem>
                                <DropdownItem>焖炉烤鸭</DropdownItem>
                            </DropdownMenu>
                        </DropdownItem>
                    </DropdownMenu>
                {/snippet}
                <Text>菜单元素在body下</Text>
            </Dropdown>
        </div>
    {/snippet}
</Story>
<Story name="Disabled" args={{ disabled: true }}>
    {#snippet template(args)}
        <Dropdown
            transfer
            trigger="click"
            align="bottomLeft"
            {...args}
            onselect={(name: string) => {
                console.log(name);
            }}
        >
            {#snippet menu()}
                <DropdownMenu>
                    <DropdownItem>驴打滚</DropdownItem>
                    <DropdownItem>炸酱面</DropdownItem>
                    <DropdownItem disabled>豆汁儿</DropdownItem>
                    <DropdownItem divided arrow
                        >北京烤鸭
                        <DropdownMenu>
                            <DropdownItem name="挂炉烤鸭">挂炉烤鸭</DropdownItem>
                            <DropdownItem>焖炉烤鸭</DropdownItem>
                        </DropdownMenu>
                    </DropdownItem>
                </DropdownMenu>
            {/snippet}
            <Text>禁用下拉菜单</Text>
        </Dropdown>
    {/snippet}
</Story>

<Story name="Align">
    {#snippet template(args)}
        {#snippet dropmenu()}
            <DropdownMenu>
                <DropdownItem>驴打滚</DropdownItem>
                <DropdownItem>炸酱面</DropdownItem>
                <DropdownItem disabled>豆汁儿</DropdownItem>
                <DropdownItem divided arrow
                    >北京烤鸭
                    <DropdownMenu>
                        <DropdownItem name="挂炉烤鸭">挂炉烤鸭</DropdownItem>
                        <DropdownItem>焖炉烤鸭</DropdownItem>
                    </DropdownMenu>
                </DropdownItem>
            </DropdownMenu>
        {/snippet}

        <div style="height: 300px; margin-top: 100px;">
            <Space dir="v">
                {#each [["bottomLeft", "bottomRight", "bottom"], ["top", "topLeft", "topRight"], ["left", "leftTop", "leftBottom"], ["right", "rightTop", "rightBottom"]] as aligns}
                    <Space justify="center">
                        {#each aligns as DropdownProps["align"][] as align}
                            <Dropdown
                                {align}
                                onselect={(name: string) => {
                                    console.log(name);
                                }}
                            >
                                {#snippet menu()}
                                    {@render dropmenu()}
                                {/snippet}
                                <Button>{align}</Button>
                            </Dropdown>
                        {/each}
                    </Space>
                {/each}
            </Space>
        </div>
    {/snippet}
</Story>

<Story name="Visible" args={{ visible: false }}>
    {#snippet template(args)}
        <div style="height: 300px;">
            <Dropdown {...args} trigger="custom" align="bottomLeft">
                {#snippet menu()}
                    <DropdownMenu>
                        <DropdownItem>驴打滚</DropdownItem>
                        <DropdownItem>炸酱面</DropdownItem>
                        <DropdownItem disabled>豆汁儿</DropdownItem>
                        <DropdownItem divided arrow
                            >北京烤鸭
                            <DropdownMenu>
                                <DropdownItem name="挂炉烤鸭">挂炉烤鸭</DropdownItem>
                                <DropdownItem>焖炉烤鸭</DropdownItem>
                            </DropdownMenu>
                        </DropdownItem>
                    </DropdownMenu>
                {/snippet}
                <Link>可控菜单</Link>
            </Dropdown>
            <span style="margin-left: 50px">
                <Button
                    onclick={() => {
                        args.visible = !args.visible;
                    }}>显示/隐藏</Button
                >
            </span>
        </div>
    {/snippet}
</Story>

<Story name="Gradient">
    {#snippet template(args)}
        <div style="height: 300px;">
            <Dropdown {...args} trigger="click" gradient={["45deg", "#9B59B6", "#3498DB"]} color="#ffffff" align="bottomLeft">
                {#snippet menu()}
                    {@render dropmenu()}
                {/snippet}
                <Link>点击显示带背景的菜单</Link>
            </Dropdown>
        </div>
    {/snippet}
</Story>

<Story name="Arrow">
    {#snippet template(args)}
        {#snippet dropmenu()}
            <DropdownMenu>
                <DropdownItem>驴打滚</DropdownItem>
                <DropdownItem>炸酱面</DropdownItem>
                <DropdownItem disabled>豆汁儿</DropdownItem>
                <DropdownItem divided arrow
                    >北京烤鸭
                    <DropdownMenu>
                        <DropdownItem name="挂炉烤鸭">挂炉烤鸭</DropdownItem>
                        <DropdownItem>焖炉烤鸭</DropdownItem>
                    </DropdownMenu>
                </DropdownItem>
            </DropdownMenu>
        {/snippet}
        <div style="height: 300px;">
            <Dropdown align="bottomLeft" arrow>
                {#snippet menu()}
                    {@render dropmenu()}
                {/snippet}
                <Button>显示Arrow</Button>
            </Dropdown>
        </div>
    {/snippet}
</Story>

<Story name="CustomPosition">
    {#snippet template(args)}
        <Dropdown
            align="bottomLeft"
            trigger="contextMenu"
            handler=".context-area"
            onmouseclick={(e) => {
                console.log(e.pageX, e.pageY);

                x = e.pageX;
                y = e.pageY;
            }}
            position={{ x: x, y: y }}
            transfer
        >
            {#snippet menu()}
                {@render dropmenu()}
            {/snippet}
            <div class="context-area" style="width: 300px; height: 400px; background: #f0f0f0"></div>
        </Dropdown>
    {/snippet}
</Story>

<Story name="Themes">
    {#snippet template(args)}
        {#snippet dropmenu()}
            <DropdownMenu>
                <DropdownItem>驴打滚</DropdownItem>
                <DropdownItem>炸酱面</DropdownItem>
                <DropdownItem disabled>豆汁儿</DropdownItem>
                <DropdownItem divided arrow
                    >北京烤鸭
                    <DropdownMenu>
                        <DropdownItem name="挂炉烤鸭">挂炉烤鸭</DropdownItem>
                        <DropdownItem>焖炉烤鸭</DropdownItem>
                    </DropdownMenu>
                </DropdownItem>
            </DropdownMenu>
        {/snippet}
        <div style="height: 300px;">
            <Space wrap>
                {#each ["primary", "success", "info", "warning", "error", "blue", "green", "red", "yellow", "magenta", "pink", "volcano", "orange", "gold", "lime", "cyan", "geekblue", "purple"] as color}
                    <Dropdown align="bottom" arrow theme={color}>
                        {#snippet menu()}
                            {@render dropmenu()}
                        {/snippet}
                        <Button>{color}</Button>
                    </Dropdown>
                {/each}
            </Space>
        </div>
    {/snippet}
</Story>

<Story name="DropdownButton">
    {#snippet template(args)}
        {#snippet dropmenu()}
            <DropdownMenu>
                <DropdownItem>驴打滚</DropdownItem>
                <DropdownItem>炸酱面</DropdownItem>
                <DropdownItem disabled>豆汁儿</DropdownItem>
                <DropdownItem divided arrow
                    >北京烤鸭
                    <DropdownMenu>
                        <DropdownItem name="挂炉烤鸭">挂炉烤鸭</DropdownItem>
                        <DropdownItem>焖炉烤鸭</DropdownItem>
                    </DropdownMenu>
                </DropdownItem>
            </DropdownMenu>
        {/snippet}
        <div style="height: 300px;">
            <ButtonGroup>
                <Button>Dropdown</Button>
                <Dropdown align="bottomRight" transfer arrow trigger="click">
                    {#snippet menu()}
                        {@render dropmenu()}
                    {/snippet}
                    <Button>{#snippet icon()}<Icon icon="f7:ellipsis" />{/snippet}</Button>
                </Dropdown>
            </ButtonGroup>
        </div>
    {/snippet}
</Story>

<Story name="ItemTheme">
    {#snippet template(args)}
        {#snippet dropmenu()}
            <DropdownMenu>
                <DropdownItem name="0">{#snippet icon()}<Icon icon="f7:cube-box" />{/snippet}Menu Item 1</DropdownItem>
                <DropdownItem name="1" theme="primary">{#snippet icon()}<Icon icon="f7:gear" />{/snippet}驴打滚</DropdownItem>
                <DropdownItem name="2" theme="secondary">{#snippet icon()}<Icon icon="f7:arrowshape-turn-up-right" />{/snippet}炸酱面</DropdownItem>
                <DropdownItem name="3" theme="tertiary">{#snippet icon()}<Icon icon="f7:arrow-branch" />{/snippet}豆汁儿</DropdownItem>
                <DropdownItem name="3" theme="primary" disabled>{#snippet icon()}<Icon icon="f7:arrow-branch" />{/snippet}豆汁儿</DropdownItem>
                <DropdownItem name="4" theme="error">{#snippet icon()}<Icon icon="f7:rocket-fill" />{/snippet}北京烤鸭</DropdownItem>
                <DropdownItem name="5" theme="warning">{#snippet icon()}<Icon icon="f7:star" />{/snippet}挂炉烤鸭</DropdownItem>
                <DropdownItem name="6" theme="info">{#snippet icon()}<Icon icon="f7:tray-arrow-down" />{/snippet}焖炉烤鸭</DropdownItem>
                <DropdownItem name="6" theme="success">{#snippet icon()}<Icon icon="f7:wrench" />{/snippet}焖炉烤鸭</DropdownItem>
            </DropdownMenu>
        {/snippet}
        <div style="height: 300px;">
            <Dropdown align="bottomLeft" transfer arrow trigger="click">
                {#snippet menu()}
                    {@render dropmenu()}
                {/snippet}
                <Button>选择项主题</Button>
            </Dropdown>
        </div>
    {/snippet}
</Story>

<Story name="Data">
    {#snippet template(args)}
        <div style="height: 300px;">
            <Dropdown
                align="bottomLeft"
                transfer
                arrow
                trigger="click"
                data={[
                    { name: "1", title: "驴打滚" },
                    { name: "2", title: "炸酱面" },
                    { name: "3", title: "豆汁儿", disabled: true },
                    {
                        name: "4",
                        divided: true,
                        title: "北京烤鸭",
                        children: [
                            { name: "41", title: "挂炉烤鸭" },
                            { name: "42", title: "焖炉烤鸭" },
                        ],
                    },
                ]}
            >
                <Button>使用data数据</Button>
            </Dropdown>
        </div>
    {/snippet}
</Story>
